<template>
  <div class="search-container">
    <div v-if="props.result.totalSize > 0" class="search-results">
      <div style="color: #999999;font-size: 12px;">
        找到 {{ props.result.totalSize }}条知识
      </div>
      <div v-for="data in props.result.data" :key="(data as IndexDoc).id" class="result-item">
        <div class="result-title" @click="doKnowView((data as IndexDoc).knowId!)" v-html="(data as IndexDoc).title">
        </div>
        <div class="info">
          {{ (data as IndexDoc).userName }} <span class="time">{{ cupkViewUtils.formatDateTimeToNew((data as
            IndexDoc).etime as string) }}</span>
        </div>
        <div class="tags">
          <el-tag class="tag" v-for="tag in cupkKnowViewUtils.splitTags((data as IndexDoc).tagTitles)" :key="tag"
            type="primary" round>
            <span v-html="tag"></span>
          </el-tag>
        </div>
        <div class="result-text" v-html="(data as IndexDoc).text"></div>
        <div class="result-imgs" v-if="(data as IndexDoc).imgs">
          <div v-for="url in cupkKnowViewUtils.getImgFileUrls((data as IndexDoc).imgs!)" :key="url">
            <img :src="url">
          </div>
        </div>
      </div>
      <el-pagination @current-change="handleCurrentChange" class="pagination" background
        :page-size="props.result.pageSize" :page-count="props.result.totalPage" :pager-count="11"
        layout="prev, pager, next" :total="props.result.totalSize" />
    </div>
    <div v-if="props.result.totalSize <= 0" class="no-results">
      <div class="no-results-message">
        很抱歉，目前我们还没有与“<span class="highlight">{{ props.word }}</span>”相关的内容或信息。不过，这正是您大展身手的好机会！如果您对“<span
          class="highlight">{{ props.word }}</span>”有了解或感兴趣，不妨亲自创建相关内容，帮助更多人了解这一主题。知识因分享而更有价值，期待您的贡献！
      </div>
      <div class="suggestions" style="margin-top: 20px;">
        温馨提示：<br /><br />
        <ul>
          <li> 您也可以尝试调整查询词，比如使用更常见的词汇或相关主题进行搜索。</li>
          <li> 如果输入有误，请检查后重新尝试。</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import cupkRoutUtils from '@/hook/cupkRoutUtils';
import type { DataResult } from '@/types/commons/DataResult';
import type { IndexDoc } from '@/types/commons/IndexDoc';
import type { IndexQuery } from '@/types/commons/IndexQuery';
import { useRouter } from 'vue-router';
import cupkKnowViewUtils from '@/hook/cupkKnowViewUtils';
import cupkViewUtils from '@/hook/cupkViewUtils';

const router = useRouter();



const props = defineProps<{
  result: DataResult;
  word: string,
  doSearchHandle: (query: IndexQuery) => void;
}>();


const handleCurrentChange = (cpage: number) => {
  props.doSearchHandle({ page: cpage, word: props.word });
};


const doKnowView = (knowid: string) => {
  cupkRoutUtils.openPageByPathId('/knowview', knowid, '_self');

};



const goPage = (path: string) => {
  router.push(path);
};
</script>

<style scoped>
.result-imgs {
  display: flex;
  flex-wrap: wrap;
  /* 允许图片换行 */
  gap: 8px;
  /* 图片之间的间距 */
  max-width: 100%;
  /* 确保容器不会超出父容器 */
  max-height: 100px;
  overflow: hidden;

  img {
    height: 100px;
  }
}


.tags {
  margin-top: 8px;

  .tag {
    margin: 4px;
  }
}

/* 样式部分 */
.search-container {
  max-width: 700px;
}


.search-results {
  margin-top: 30px;

  .info {
    color: #999999;
    font-size: 14px;
    margin-top: 8px;
    margin-left: 4px;

    .time {
      color: var(--el-color-success);
    }

  }


}

.result-item {
  margin-top: 30px;
}

.result-title {
  font-size: 22px;
  color: var(--el-menu-text-color);
  cursor: pointer;
}

.result-text {
  font-size: 14px;
  color: #474747;
  line-height: 1.7em;
  margin-top: 10px;
}

.pagination {
  margin-top: 50px;
  margin-bottom: 200px;
}

.no-results {
  font-size: 16px;
  color: #555555;
  margin-top: 20px;
  line-height: 1.7em;
}

.no-results-message .highlight {
  color: var(--el-color-danger);
}

.suggestions ul {
  margin-top: 10px;
}
</style>
<style>
/* 其他通用样式 */
.lucene_index {
  color: var(--el-color-danger);
}
</style>
